import styles from './main.less';
import { Carousel, Flex, WhiteSpace, Grid, Toast, NoticeBar } from 'antd-mobile';
import Circle from 'src/components/circle/circle';
import { connect } from 'dva';
import classnames from 'classnames';
import router from 'umi/router';
import { Component } from 'react';
import withRouter from 'umi/withRouter';
import Loading from 'src/components/loading';
class Main extends Component {
  componentDidMount() {
    this.props.dispatch({
      type: 'wallet/getUserNiubiEff'
    })
    console.log('​Main -> componentDidMount -> this.props', this.props);
    this.props.dispatch({
      type: 'main/EInitUser',
      code: this.props.location.query.code
    });
    this.props.dispatch({
      type: 'main/queryLatestPeriod'
    });
    this.props.dispatch({
      type: 'main/getAllNotificationEff'
    });
    this.props.dispatch({
      type: 'muniuren/getUserInfoEff'
    })
  }
  render() {
    let { latestPeriod, notifications } = this.props.main;
    let { cattle_type, cattle_total, bonus_type, cattle_saled } = latestPeriod;
    let percent = parseFloat(((cattle_saled / cattle_total) * 100).toFixed(2));
    latestPeriod.percent = percent;
    return (
      <div>
        <Carousel autoplay={false} infinite autoplay>
          {this.props.main.carouselData.map(item => (
            <a
              key={item}
              href={item.url}
              style={{ display: 'inline-block', width: '100%', height: '150px' }}
            >
              <img
                src={item.imgSrc}
                alt=""
                style={{ width: '100%', height: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.props.dispatch({ type: 'main/changeImgHeight', playload: 'auto' });
                }}
              />
            </a>
          ))}
        </Carousel>
        <WhiteSpace size="lg" />
        <Carousel
          className={styles.myCarousel}
          vertical
          dots={false}
          dragging={false}
          swiping={false}
          autoplay
          infinite
        >
          {notifications.map((notification, index) => (
            <NoticeBar marqueeProps={{ loop: true, style: { padding: '0 7.5px' } }} key={index}>
              {notification}
            </NoticeBar>
          ))}
        </Carousel>

        <WhiteSpace size="lg" />
        <Grid
          className="grid"
          columnNum="3"
          data={this.props.main.gridData}
          hasLine={false}
          itemStyle={{ height: '9rem' }}
          onClick={obj => {
            console.log('TCL: Main -> obj.text', obj.text);
            if (obj.text === '生活商城') {
              console.log('TCL: Main -> obj.url', obj.url);
              console.log('TCL: Main -> window', window);
              if(this.props.main.loginToken){
                window.location.href = `${obj.url}?token=${this.props.main.loginToken}`;
              }else{
                Toast.info('生活商城登录身份获取中，请稍后再试')
              }
            } else if(obj.text ==='我的钱包') {
              Toast.info(`您的钱包中有${this.props.niu_bi}牛币`)
            }else{
              router.push(obj.url);
            }
          }}
        />
        <WhiteSpace size="lg" />
        <WhiteSpace size="lg" />
        <Flex
          className={styles.middleMenu}
          onClick={() => {
            this.props.dispatch({
              type: 'buy/pageInit',
              latestPeriod
            });
            router.push('/layout/buy?tabName=main');
          }}
        >
          <div className={styles.left}>
            <Flex direction="column" className={styles.leftMain}>
              <Flex.Item className={styles.leftMainItem + ' ' + styles.leftMainItemTop}>
                {cattle_type}
                {cattle_total}
                只，
                {bonus_type}
                分红
              </Flex.Item>
              <Flex.Item className={styles.leftMainItem}>
                <Flex className={styles.leftMainItemBottom}>
                  {this.props.main.menuData.map((item, itemIndex) => (
                    <Flex.Item key={item.name} style={{ height: '100%' }}>
                      <Flex direction="column" style={{ height: '100%' }}>
                        <span> {item.name} </span>
                        <span
                          className={classnames({
                            [styles.coloredText]: itemIndex < 2,
                            [styles.coloredTextGray]: itemIndex === 2
                          })}
                        >
                          {item.data}
                        </span>
                      </Flex>
                    </Flex.Item>
                  ))}
                </Flex>
              </Flex.Item>
            </Flex>
          </div>
          <div className={styles.right}>
            <Circle percent={percent} />
          </div>
        </Flex>
        {/* <Flex className={styles.footer}>
          <img className={styles.footerIcon} src={this.props.main.footerIconUrl} />
          <div className={styles.footerActivity}> {this.props.main.footerActivityText} </div>
        </Flex> */}
      </div>
    );
  }
}
export default withRouter(
  connect(state => {
    return {
      main: state.main,
      loading: state.loading.models.main,
      ...state.wallet
    };
  })(Loading(Main))
);
